<script setup lang="ts" name="Plan">
  import {nextTick, reactive, ref} from 'vue'
  import getComputedConfig from '@/hooks/getPageConfig'
  import {systemBaseUrl} from '@/api/config/base.js'
  import to from "@/utils/to";
  import { ElDialog } from 'element-plus';
  import type { CalendarDateType, CalendarInstance } from 'element-plus'
  import {ElMessage} from "element-plus";
  import axios from "axios";
  import {getToken} from '@/utils/auth';
  import {
    changeUserStatus,
    resetUserPwd,
    getUser,
    deptTreeSelect,
    listUser
  } from '@/api/system/user'

  import {
    plans,
  } from '@/api/workorder/workorder'

  const prefix = import.meta.env.VITE_APP_BASE_API
  const {proxy} = getCurrentInstance()
  const {sys_normal_disable, sys_user_sex, support_method, work_order_status, environment} = proxy.useDict(
    'sys_normal_disable',
    'sys_user_sex',
    'support_method',
    'work_order_status',
    'environment'
  )
  const pageName = 'workOrderScheduling'
  const requestBaseUrl = systemBaseUrl
  const dateRange = ref([])
  const userList = ref([])
  const weekPlans = ref({})
  const calendar = ref<CalendarInstance>()
  const selectDate = (val: CalendarDateType) => {
    if (!calendar.value) return
    calendar.value.selectDate(val)
  }
  const getWeek = (date) => {
    console.log('date.getDay():', date.getDay())
    let day = date.getDay() || 7;
    let diff = day;
    console.log('diff:', diff)
    let startDate = new Date(date - diff * 86400000); // 周日的日期
    let endDate = new Date((date - diff * 86400000) + 6 * 86400000); // 周一的日期
    console.log('startDate:', formatDate(startDate), 'endDate:', formatDate(endDate))
    return [
      formatDate(startDate),
      formatDate(endDate)
    ];
  }
  const formatDate = (date) => {
    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
  }
  const changeWeek = (type) => {
    let diff = null
    if(type == 'next-week'){
      diff = new Date(dateRange.value[0]).getDay() - 7
    }else if(type == 'prev-week'){
      diff = new Date(dateRange.value[0]).getDay() + 7
    }else if(type == 'week'){
      dateRange.value = getWeek(new Date())
      queryPlans()
      return
    }
    let startDate = new Date(new Date(dateRange.value[0]) - diff * 86400000); // 周日的日期
    let endDate = new Date(new Date(dateRange.value[1]) - diff * 86400000); // 周六的日期
    console.log('changeWeek startDate:',  formatDate(startDate) , ' endDate:', formatDate(endDate))
    dateRange.value[0] = formatDate(startDate)
    dateRange.value[1] = formatDate(endDate)
    queryPlans()
  }
  const init = () => {
    dateRange.value = getWeek(new Date());
    //查询本部门人员
    queryUsers()
    //
  }
  const queryPlans = async () => {

    let query = {
      'startDate': dateRange.value[0],
      'endDate': dateRange.value[1],
    }
    const [error, res] = await to(plans(query))
    if(res){
      console.log('queryPlans:', res)
      let data = res.data
      if(data){
        let planDatas = []
        for (let i = 0; i < userList.value.length; i++) {
          let user = userList.value[i]
          let userId = user.userId;
          let nickName = user.nickName
          let plans = data[userId]
          let planItem = {
            userId,
            nickName,
            plans
          }
          planDatas.push(planItem)
        }
        weekPlans.value = planDatas
        console.log('weekPlans:', weekPlans.value)
      }
    }
  }
  const queryUsers = async () => {
    let params = {
      pageNum: 1,
      pageSize: 200
    }
    const [error, res] = await to(listUser(params))
    if(res){
      let rows = res.rows
      userList.value = rows
      if(rows){
        //查询任务列表
        queryPlans()
      }

    }
  }
  init()
</script>
<template>
  <div class="default-main page">
    <div class="top">
      <div class="left">

      </div>
      <div class="right">
        <el-calendar ref="calendar" :range="dateRange">
          <template #header="{ date }">
            <span>{{ date }}</span>
            <el-button-group>
              <el-button size="small" @click="changeWeek('prev-week')">
                上周
              </el-button>
              <el-button size="small" @click="changeWeek('week')">本周</el-button>
              <el-button size="small" @click="changeWeek('next-week')">
                下周
              </el-button>
            </el-button-group>
          </template>
        </el-calendar>
      </div>
    </div>
    <div class="buttom">
      <el-scrollbar class="scrollbar-container" height="520px">
        <div class="buttom-item" v-for="item in weekPlans">
          <div class="name">{{item.nickName}}</div>
          <div class="plan-container">
            <div v-for="i in [...Array(7).keys()].slice(1)" :class="item.plans[i].name != null? 'el-calendar-table el-calendar-day task-container' : 'el-calendar-table el-calendar-day no-task-container'">
              <div class="order-name">
                {{item.plans[i].name != null? item.plans[i].name: '无'}}
              </div>
              <div class="order-status">
                <dict-tag :options="work_order_status" :value="item.plans[i].orderStatus"/>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<style scoped>
  .page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .top{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
  }
  .buttom{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
  }
  .scrollbar-container{
    width: 100%;
  }
  .buttom-item{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }
  .left{
    width: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
  }
  .name{
    width: 10%;
    height: 60px;
    background-color: #a0cfff;
    margin: 5px;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .plan-container{
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

  }

  .right{
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .task-container{
    background-color: #d9ecff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 80px;
    margin: 5px;
    position: relative;
  }
  .order-status{
    position: absolute;
    top: 2px;
    right: 2px;
  }
  .no-task-container{
    background-color: #f5f5f5;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 80px;
    margin: 5px;
  }
</style>
